<template>
    <h2 style="text-align: center;">用户列表</h2>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 输入框 -->
        <el-form-item label="登录名称">
            <el-input v-model="formInline.uname" placeholder="请输入登录名称" clearable />
        </el-form-item>
        <!-- 状态下拉 -->
        <el-form-item label="状态">
            <el-select v-model="formInline.state"  clearable >
                <el-option label="请选择状态" :value="-1" />
                <el-option label="正常" value="0" />
                <el-option label="冻结" value="1" />
            </el-select>
        </el-form-item>
        <!-- 时间查询 -->
        <el-form-item label="出生日期">
            <el-date-picker v-model="formInline.Begin" type="date" placeholder="请选择开始日期" clearable/>-
            <el-date-picker v-model="formInline.End"   type="date" placeholder="请选择结束日期" clearable/>
        </el-form-item>

        <!-- 查询 -->
        <el-form-item>
            <el-button type="primary" @click="ShowUserInfo">查询</el-button>
        </el-form-item>
    </el-form>
    <!-- 显示部分  -->
    <el-table :data="Info" border style="width: 100%">
      <el-table-column prop="U_LoginName" label="登录名称" width="180" align="center"/>
      <el-table-column prop="U_LoginPassword" label="登录密码" width="180" align="center"/>
      <el-table-column prop="U_TrueName" label="真实姓名" width="180" align="center"/>
      <!-- 性别 -->
      <el-table-column prop="U_Sex" label="性别" width="180" align="center">
        <template v-slot="setup">
            <el-tag v-if="setup.row.U_Sex==true" type="success">男</el-tag>
            <el-tag v-else type="error">女</el-tag>
        </template>
      </el-table-column>
      <!-- 出生日期 -->
      <el-table-column prop="U_Birthday" label="出生日期" width="180" align="center">
        <template v-slot="setup">
            <span>{{ moment(setup.row.U_Birthday).format('yyyy年MM月DD日') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="U_State" label="状态" width="180" align="center">
        <template v-slot="setup">
            <el-tag v-if="setup.row.U_State==0" type="success">正常</el-tag>
            <el-tag v-else type="error">冻结</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="UserRole_Name" label="角色" width="180" align="center"></el-table-column>
      <el-table-column prop="name" label="操作" align="center">
        <template v-slot="scope">
            <el-button type="primary" @click="UpdUserInfo(scope.row.U_Id)" size="small" style="margin-right: 10px;">修改</el-button>
            <el-button type="danger" @click="DelUserInfo(scope.row.U_Id)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
        <el-pagination
        v-model:current-page="PageInfo.index"
        v-model:page-size="PageInfo.size"
        :page-sizes="[2,3,5]"
        :size="PageInfo.size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="PageInfo.zongtiao"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>
  
<script lang="ts" setup>
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import moment from 'moment';
    import { useRouter } from 'vue-router';
    import { ElMessage, ElMessageBox } from 'element-plus'

    const router=useRouter();
    //显示响应式数据
    const Info=ref([])
    onMounted(()=>{
        ShowUserInfo();//显示
    })
    //分页响应式数据
    const PageInfo=ref({
        index:1,
        size:2,
        zongtiao:0,
        zongpage:0,
    })
    //分页
    const background = ref(true)
    const disabled = ref(false)
    //修改页容量
    const handleSizeChange = (val: number) => {
        PageInfo.value.size=val;
        ShowUserInfo();//调用显示方法
    }
    //跳转页
    const handleCurrentChange = (val: number) => {
        PageInfo.value.index=val;
        ShowUserInfo();//调用显示方法
    }
    //查询条件
    const formInline = ref({
        uname: '',
        state: -1,
        Begin: '',
        End:'',
    })
    //显示
    const ShowUserInfo=()=>{
        axios.get("https://localhost:44377/api/User/ShowUserInfo",
            {
                params:{
                    uname:formInline.value.uname,
                    state:formInline.value.state,
                    Begin:formInline.value.Begin,
                    End:formInline.value.End,
                    index:PageInfo.value.index,
                    size:PageInfo.value.size,
                }
            }
        )
        .then(res=>{
            Info.value=res.data.Data.Plist,
            PageInfo.value.zongpage=res.data.Data.ZongPage,
            PageInfo.value.zongtiao=res.data.Data.ZongTiao
        })
    }
    //修改
    const UpdUserInfo=(U_Id:number)=>{
        router.push({
            name:"UpdUserInfo",
            params:{
                id:U_Id,
            }
        })
    }
    //逻辑删除
    const DelUserInfo=(U_Id:number)=>{
        ElMessageBox.confirm(
            '确定删除？',
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
       )
        .then(() => {
            axios.delete("https://localhost:44377/api/User/DelUserInfo?id="+U_Id)
            .then(res=>{
                if(res.data.Data>0)
                {
                    ElMessage.success('删除成功');
                    ShowUserInfo();//跳转到显示页面
                }
                else
                {
                    ElMessage.error("删除失败");
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
    }
</script>


<style>
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
</style>

<style scoped>
    .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
    margin-bottom: 16px;
    }
</style>